<!--
 * @Description: 该页面功能已经废弃，此页面内容仅做留存以备查询。-- Taoist
-->
<template>
	<view class="mainPage profit" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view class="dingwei">
			<view class="kong">
			</view>
			<view class="tabs">
				<view class="tabs-item" :class="tabNum==0?'active':''" @click="tabs(0)">问诊明细</view>
				<view class="tabs-item" :class="tabNum==1?'active':''" @click="tabs(1)">结算记录</view>
			</view>
		</view>
		<view class="box">
			<view class="box1" v-if="tabNum==0">
				<view class="search-box">
					<text class="text">快速搜索</text>
					<view class="xuanzeqi">
						<u-dropdown ref="uDropdown" :height="60" :close-on-click-mask="false">
							<u-dropdown-item :title="titleText">
								<view class="slot-content">
									<view class="xuanze-list">
										<view class="xuanze-item" v-for="(item,index) in pullDownList" :key="index" @click="xuanze(item,index)">
											{{item}}
										</view>
									</view>
								</view>
							</u-dropdown-item>
						</u-dropdown>
					</view>
				</view>
				<view class="list" v-if="shuju1">
					<view class="item" v-for="(item,index) in idetails" :key="index">
						<view class="riqi">
							问诊日期：<text>{{item.en_time}}</text>
						</view>
						<view class="pet-info">
							<view class="left">
								宠物信息：<text>{{item.petname}} {{item.sex}} {{item.weight}}kg</text>
							</view>
							<view class="right">
								{{item.consultation_type}}
							</view>
						</view>
						<view class="jine">
							问诊金额：<text>¥ {{item.discount_price}}</text>
						</view>
					</view>
					<view class="meiyou">
						<u-loadmore v-if="idetails.length>=10" :status="status" :load-text="loadText" />
					</view>
				</view>
				<view class="wushuju" v-else>
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/wushuju.png" mode=""></image>
					<text>暂无记录</text>
				</view>
			</view>
			<view class="box2" v-if="tabNum==1">
				<view class="box2-1">
					<view class="left">
						问诊总数：{{recordlist.people_sum == undefined ? 0 : recordlist.people_sum}}
					</view>
					<view class="right">
						总收入：<text>{{recordlist.total_price == undefined ? 0 : recordlist.total_price}}</text>
					</view>
				</view>
				<view class="list" v-if="shuju2">
					<view class="item" v-for="(item,index) in recordlist.record" :key="index">
						<view class="left">
							<view class="yue">
								{{item.month}}月
							</view>
							<view class="nian">
								{{item.year}}年
							</view>
						</view>
						<view class="right">
							<view class="shouru">
								收入：<text>￥{{item.discount_price}}</text>
							</view>
							<view class="wenzhennum">
								问诊数量：{{item.Consultation_num}}
							</view>
							<view class="time">
								结算时间：{{item.settlement_time}}
							</view>
						</view>
					</view>
					<view class="meiyou">
						<u-loadmore v-if="recordlist.record.length>=10" :status="status" :load-text="loadText" />
					</view>
				</view>
				<view class="wushuju" v-else>
					<image src="https://swl-1304532176.cos.ap-guangzhou.myqcloud.com/chongesheng_doctor/icon/wushuju.png" mode=""></image>
					<text>暂无记录</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
var that
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead
	},
	data() {
		return {
			title: "profit1",
			tabNum: 0,
			titleText: "全部",
			pullDownList: [
				"全部",
				"一月",
				"二月",
				"三月",
				"四月",
				"五月",
				"六月",
				"七月",
				"八月",
				"九月",
				"十月",
				"十一月",
				"十二月"
			],
			idetails: '',
			recordlist: { people_sum: 0, total_price: 0 },
			shuju1: "1",  //判断是否有数据
			shuju2: "2",  //判断是否有数据
			month: '',
			page: 1,
			status: 'loadmore',
			loadText: {
				loadmore: '轻轻上拉',
				loading: '努力加载中',
				nomore: '实在没有了'
			}
		}
	},
	onReachBottom() {   ///page 加载
		if (that.status == 'nomore') {
			return
		}
		console.log("触底la")
		that.status = 'loading';
		that.page = ++that.page;
		setTimeout(() => {
			that.requestData(that.page)
		}, 500)
	},
	onLoad() {
		that = this
		that.details(that.page)
		that.record(that.page)
	},
	methods: {
		tabs(num) {
			that.tabNum = num
			if (num == 0) {
				that.details(that.page)
			} else if (num == 1) {
				that.record(that.page)
			}
			console.log('unm', that.tabNum)
		},
		xuanze(item, index) {
			that.titleText = item
			if (index == 0) {
				that.month = ''
			} else {
				that.month = index
			}
			that.details(that.page)
			this.$refs.uDropdown.close();
			console.log('选择月份', index)
		},
		details(page) {
			that.$postAjax1('Doctorsside_consultation_detailed', {
				page: page,
				year: '',
				month: that.month
			}, function (data) {
				if (that.page == 1) {
					that.idetails = data.data.data
				} else {
					that.idetails = that.idetails.concat(data.data.data)
				}
				if (data.data.data.length < 10) that.status = 'nomore';
				else that.status = 'loading';
				console.log('问诊明细获取成功')
			})
		},
		record(page) {
			that.$postAjax1('Doctorsside_consultation_settlement', {
				page: 1,
			}, function (data) {
				if (that.page == 1) {
					that.recordlist = data.data.data
				} else {
					that.recordlist = that.recordlist.concat(data.data.data)
				}
				if (data.data.data.length < 10) that.status = 'nomore';
				else that.status = 'loading';
				console.log('结算记录获取成功')
			})
		}
	}
}
</script>
<style scoped lang="scss">
.profit {
	min-height: 100vh;
	background-color: #ffffff;
	padding: 120rpx 32rpx 0;
	position: relative;
	.dingwei {
		background-color: #ffffff;
		z-index: 999;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		.kong {
			height: 16rpx;
			width: 100%;
			background: #f6f6f6;
		}
		.tabs {
			display: flex;
			justify-content: center;
			padding: 22rpx 0 28rpx;
			.tabs-item {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 60rpx;
				color: #ff902b;
				text-align: center;
				width: 250rpx;
				height: 60rpx;
				border: 2rpx solid #ff912d;
				opacity: 1;
				border-radius: 0rpx 30rpx 30rpx 0rpx;
				&:nth-of-type(1) {
					border-radius: 30rpx 0rpx 0rpx 30rpx;
				}
				&.active {
					background: linear-gradient(226deg, #ff9331 0%, #fe7600 100%);
					color: #ffffff;
				}
			}
		}
	}
	.box {
		.box1 {
			.search-box {
				margin-bottom: 28rpx;
				.text {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40px;
					color: #343434;
					vertical-align: middle;
					margin-right: 14rpx;
				}
				.xuanzeqi {
					display: inline-block;
					vertical-align: middle;
					min-width: 130rpx;
					height: 58rpx;
					border: 2rpx solid #c2c0c0;
					border-radius: 8rpx;
					.xuanze-list {
						border: 2rpx solid #c2c0c0;
						background-color: #ffffff;
						.xuanze-item {
							min-width: 130rpx;
							height: 60rpx;
							text-align: center;
							border-bottom: 2rpx solid #c2c0c0;
							line-height: 60rpx;
							&:nth-last-of-type(1) {
								border: none;
							}
						}
					}
				}
			}
			.list {
				.item {
					margin-bottom: 20rpx;
					padding: 28rpx 32rpx 28rpx 28rpx;
					width: 100%;
					background: #ffffff;
					border: 2rpx solid rgba(255, 121, 0, 0.10196078431372549);
					box-shadow: 0rpx 4rpx 8rpx rgba(97, 123, 185, 0.07);
					border-radius: 16rpx;
					.riqi {
						margin-bottom: 28rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: #959595;
						text {
							font-size: 24rpx;
							font-weight: 400;
							line-height: 34rpx;
							color: #242424;
						}
					}
					.pet-info {
						margin-bottom: 28rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.left {
							font-size: 28rpx;
							font-weight: 400;
							line-height: 40rpx;
							color: #959595;
							text {
								font-size: 28rpx;
								font-weight: 400;
								line-height: 40rpx;
								color: #242424;
							}
						}
						.right {
							font-size: 28rpx;
							font-weight: 400;
							line-height: 40rpx;
							color: #fa6400;
							padding: 10rpx 20rpx;
							border: 2rpx solid #fa6400;
							border-radius: 30rpx;
						}
					}
					.jine {
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: #959595;
						text {
							font-size: 28rpx;
							font-weight: 400;
							line-height: 40rpx;
							color: #ed0b0d;
						}
					}
				}
				.meiyou {
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #959595;
				}
			}
			.wushuju {
				padding-top: 240rpx;
				text-align: center;
				image {
					display: block;
					width: 186rpx;
					height: 196rpx;
					margin: auto;
					margin-bottom: 38rpx;
				}
				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #959595;
					line-height: 40rpx;
				}
			}
		}
		.box2 {
			.box2-1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				.left {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #343434;
				}
				.right {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					color: #343434;
					text {
						color: #ed0b0d;
					}
				}
			}
			.list {
				.item {
					margin-bottom: 20rpx;
					width: 100%;
					background: #ffffff;
					border: 2rpx solid rgba(255, 121, 0, 0.10196078431372549);
					box-shadow: 0rpx 4rpx 8rpx rgba(97, 123, 185, 0.07);
					border-radius: 16rpx;
					display: flex;
					justify-content: space-between;
					padding: 42rpx 0 38rpx 46rpx;
					.left {
						padding-top: 26rpx;
						flex: 1;
						.yue {
							font-size: 36rpx;
							font-weight: 400;
							line-height: 50rpx;
							color: #242424;
							margin-bottom: 4rpx;
						}
						.nian {
							font-size: 28rpx;
							font-weight: 400;
							line-height: 40rpx;
							color: #242424;
						}
					}
					.right {
						width: 50%;
						.shouru {
							font-size: 24rpx;
							font-weight: 400;
							line-height: 34rpx;
							color: #242424;
							text {
								font-size: 28rpx;
								font-weight: 400;
								line-height: 40rpx;
								color: #ed0b0d;
							}
							margin-bottom: 20rpx;
						}
						.wenzhennum {
							font-size: 26rpx;
							font-weight: 400;
							line-height: 36rpx;
							color: #242424;
							margin-bottom: 20rpx;
						}
						.time {
							font-size: 26rpx;
							font-weight: 400;
							line-height: 36rpx;
							color: #343434;
						}
					}
				}
				.meiyou {
					font-size: 28rpx;
					line-height: 38rpx;
					color: #959595;
					text-align: center;
				}
			}
			.wushuju {
				padding-top: 240rpx;
				text-align: center;
				image {
					display: block;
					width: 186rpx;
					height: 196rpx;
					margin: auto;
					margin-bottom: 38rpx;
				}
				text {
					font-size: 28rpx;
					font-weight: 400;
					color: #959595;
					line-height: 40rpx;
				}
			}
		}
	}
}
</style>
